<div class="panel panel-default library-pane" ng-controller="LibraryController">

  <!--div class="panel-heading clearfix">
    <h3 class="panel-title pull-left" translate="global.form.library">Library</h3>
  </div-->

  <div class="panel-body">

    <button type="button" class="btn btn-primary btn-sm create-pipeline-btn"
            ng-disabled="!isAuthorized([userRoles.admin, userRoles.creator])"
            ng-click="addPipelineConfig()">
      <span class="glyphicon glyphicon-plus"></span>
      <span translate="home.header.createNewPipeline">Create New Pipeline</span>
    </button>

    <ul class="list-group">
      <li class="list-group-item pointer clearfix"
          ng-class="{'active' : pipeline.name === activeConfigInfo.name}"
          ng-repeat="pipeline in pipelines"
          ng-click="onSelect(pipeline)">

        <div class="pipeline-details pull-left">
          <span>{{pipeline.name}}</span>
          <!--h5 class="list-group-item-heading">{{pipeline.name}}</h5-->
          <!--p class="list-group-item-text">{{pipeline.description}}</p-->
        </div>

        <div class="action-menu pull-right" dropdown
             ng-if="pipeline.name === activeConfigInfo.name && isAuthorized([userRoles.admin, userRoles.creator])">
          <span class="dropdown-toggle" dropdown-toggle aria-expanded="true"
                tooltip-placement="bottom"
                tooltip="{{'global.form.actions' | translate}}"
                tooltip-popup-delay="500"
                tooltip-append-to-body="true"
                ng-click="$event.stopPropagation();">
            <i class="fa fa-ellipsis-v"></i>
          </span>
          <ul class="dropdown-menu" role="menu">
            <li role="presentation"
                ng-hide="pipeline.name === common.pipelineStatus.name  && common.pipelineStatus.state === 'RUNNING'">
              <a href="#" dropdown-toggle ng-click="deletePipelineConfig(pipeline, $event)">
                <i class="fa fa-trash-o"></i>
                <span>{{'global.form.delete' | translate}}</span>
              </a>
            </li>

            <li role="presentation">
              <a href="#" dropdown-toggle ng-click="duplicatePipelineConfig(pipeline, $event)">
                <i class="fa fa-files-o"></i>
                <span>{{'global.form.duplicate' | translate}}</span>
              </a>
            </li>

            <li role="presentation">
              <a href="#" dropdown-toggle ng-click="importPipelineConfig(pipeline, $event)">
                <i class="glyphicon glyphicon-import"></i>
                <span>{{'global.form.import' | translate}}</span>
              </a>
            </li>

            <li role="presentation">
              <a href="#" dropdown-toggle ng-click="exportPipelineConfig(pipeline, $event)">
                <i class="glyphicon glyphicon-export"></i>
                <span>{{'global.form.export' | translate}}</span>
              </a>
            </li>
          </ul>
        </div>

        <div class="pull-right running"
             ng-if="pipeline.name === common.pipelineStatus.name  && common.pipelineStatus.state === 'RUNNING'">
          <i class="fa fa-spinner fa-spin fa-14x"></i>
        </div>

      </li>

      <li class="list-group-item" ng-if="!pipelines || pipelines.length === 0" translate="home.library.emptyPipelineList">
        No Pipeline to view.
      </li>

    </ul>

  </div>

 </div>